<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>母亲往事配对消消乐 - 《秋天的怀念》</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-slate-50 to-slate-100 min-h-screen p-4 md:p-8">
    <div class="max-w-6xl mx-auto">
        <!-- 游戏头部 -->
        <div class="text-center mb-8">
            <h1 class="text-3xl md:text-4xl font-bold text-slate-800 mb-2 flex items-center justify-center gap-3">
                <<i class="fa fa-heart text-red-500"></</i>母亲往事配对消消乐
            </h1>
            <p class="text-slate-600 text-lg">点击左侧母亲的行为，再点击右侧对应细节，配对成功得分，错误则游戏结束</p>
        </div>

        <!-- 得分区域 -->
        <div class="flex justify-center items-center gap-6 mb-8 bg-white/80 backdrop-blur-sm py-3 px-6 rounded-full shadow-md">
            <div class="text-slate-700 text-xl font-medium">
                当前得分：<span id="score" class="text-red-600 font-bold text-2xl">0</span>
            </div>
            <button id="restartBtn" class="flex items-center gap-2 px-5 py-2 bg-red-500 text-white rounded-full hover:bg-red-600 transition-colors shadow-sm">
                <<i class="fa fa-refresh"></</i>重新开始
            </button>
        </div>

        <!-- 游戏主体区域 -->
        <div class="flex flex-col lg:flex-row gap-6 md:gap-8">
            <!-- 左侧：母亲行为卡片区 -->
            <div class="w-full lg:w-1/2 bg-white rounded-2xl shadow-lg p-4 md:p-6">
                <h2 class="text-xl font-bold text-slate-800 mb-4 flex items-center gap-2">
                    <<i class="fa fa-list-ul text-red-500"></</i>母亲的行为
                </h2>
                <div id="leftCards" class="grid grid-cols-1 sm:grid-cols-2 gap-4"></div>
            </div>

            <!-- 右侧：对应细节卡片区 -->
            <div class="w-full lg:w-1/2 bg-white rounded-2xl shadow-lg p-4 md:p-6">
                <h2 class="text-xl font-bold text-slate-800 mb-4 flex items-center gap-2">
                    <<i class="fa fa-list-ol text-red-500"></</i>对应细节
                </h2>
                <div id="rightCards" class="grid grid-cols-1 sm:grid-cols-2 gap-4"></div>
            </div>
        </div>

        <!-- 游戏结束弹窗 -->
        <div id="gameOverModal" class="fixed inset-0 bg-black/60 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-2xl p-8 max-w-md w-full mx-4 shadow-2xl transform transition-all">
                <div class="text-center mb-6">
                    <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-red-100 mb-4">
                        <<i class="fa fa-times text-4xl text-red-500"></</i>
                    </div>
                    <h2 class="text-2xl font-bold text-slate-800 mb-2">游戏结束</h2>
                    <p class="text-slate-600 mb-4">很遗憾，配对错误啦！</p>
                    <div class="text-xl font-medium text-slate-700">
                        本次总得分：<span id="finalScore" class="text-red-600 font-bold text-3xl">0</span>
                    </div>
                </div>
                <div class="flex gap-4">
                    <button id="closeModalBtn" class="flex-1 py-3 bg-slate-200 text-slate-700 rounded-xl hover:bg-slate-300 transition-colors">
                        查看答案
                    </button>
                    <button id="replayBtn" class="flex-1 py-3 bg-red-500 text-white rounded-xl hover:bg-red-600 transition-colors">
                        再来一局
                    </button>
                </div>
                <!-- 答案列表（默认隐藏） -->
                <div id="answerList" class="mt-6 hidden text-left text-slate-600 space-y-2">
                    <h3 class="font-bold text-slate-800 mb-2">正确配对答案：</h3>
                    <div id="answersContainer"></div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .card {
            @apply bg-slate-50 rounded-xl p-4 md:p-5 text-slate-700 font-medium hover:bg-slate-100 transition-all cursor-pointer shadow-sm hover:shadow-md transform hover:-translate-y-1;
            user-select: none;
        }
        .card.selected {
            @apply bg-red-100 border-2 border-red-500 text-red-800;
        }
        .card.matched {
            @apply opacity-0 scale-95 transition-all duration-300 pointer-events-none;
        }
    </style>

    <script>
        // 游戏数据：母亲行为与对应细节配对（8组）
        const gameData = [
            {
                id: 1,
                left: "我暴怒时的反应",
                right: "悄悄躲出去，又在看不见的地方偷偷听着我的动静"
            },
            {
                id: 2,
                left: "面对我的绝望",
                right: "扑过来抓住我的手，忍住哭声说要好好儿活"
            },
            {
                id: 3,
                left: "对待自身病情",
                right: "肝疼得整宿整宿睡不着，却一直对我隐瞒"
            },
            {
                id: 4,
                left: "提议去北海",
                right: "憔悴的脸上露出央求般的神色，反复劝说我"
            },
            {
                id: 5,
                left: "说话时的顾虑",
                right: "比我还敏感，刻意避开'跑''踩'这类字眼"
            },
            {
                id: 6,
                left: "回忆儿时时光",
                right: "说起我小时候踩杨树花当毛毛虫的趣事"
            },
            {
                id: 7,
                left: "临终前的牵挂",
                right: "昏迷前还惦记着我和妹妹，嘱托我们好好活"
            },
            {
                id: 8,
                left: "给予我的鼓励",
                right: "两次说起'好好儿活'，想让我重新振作"
            }
        ];

        // DOM元素
        const leftCardsContainer = document.getElementById('leftCards');
        const rightCardsContainer = document.getElementById('rightCards');
        const scoreEl = document.getElementById('score');
        const restartBtn = document.getElementById('restartBtn');
        const gameOverModal = document.getElementById('gameOverModal');
        const finalScoreEl = document.getElementById('finalScore');
        const closeModalBtn = document.getElementById('closeModalBtn');
        const replayBtn = document.getElementById('replayBtn');
        const answerList = document.getElementById('answerList');
        const answersContainer = document.getElementById('answersContainer');

        // 游戏状态
        let currentScore = 0;
        let selectedLeft = null; // 选中的左侧卡片ID
        let isProcessing = false; // 是否正在处理配对

        // 初始化游戏
        function initGame() {
            // 重置状态
            currentScore = 0;
            selectedLeft = null;
            isProcessing = false;
            scoreEl.textContent = currentScore;
            gameOverModal.classList.add('hidden');
            answerList.classList.add('hidden');

            // 清空卡片容器
            leftCardsContainer.innerHTML = '';
            rightCardsContainer.innerHTML = '';

            // 洗牌：打乱左侧和右侧卡片顺序
            const shuffledLeft = [...gameData].sort(() => Math.random() - 0.5);
            const shuffledRight = [...gameData].sort(() => Math.random() - 0.5);

            // 生成左侧卡片
            shuffledLeft.forEach(item => {
                const card = document.createElement('div');
                card.className = 'card';
                card.dataset.id = item.id;
                card.textContent = item.left;
                card.addEventListener('click', () => handleLeftCardClick(item.id));
                leftCardsContainer.appendChild(card);
            });

            // 生成右侧卡片
            shuffledRight.forEach(item => {
                const card = document.createElement('div');
                card.className = 'card';
                card.dataset.id = item.id;
                card.textContent = item.right;
                card.addEventListener('click', () => handleRightCardClick(item.id));
                rightCardsContainer.appendChild(card);
            });

            // 生成答案列表
            generateAnswerList();
        }

        // 生成正确答案列表
        function generateAnswerList() {
            answersContainer.innerHTML = '';
            gameData.forEach((item, index) => {
                const answerItem = document.createElement('div');
                answerItem.className = 'flex flex-col sm:flex-row gap-2';
                answerItem.innerHTML = `
                    <span class="font-medium">${index + 1}. ${item.left}</span>
                    <span>→ ${item.right}</span>
                `;
                answersContainer.appendChild(answerItem);
            });
        }

        // 左侧卡片点击事件
        function handleLeftCardClick(id) {
            if (isProcessing) return;

            // 移除之前选中的左侧卡片样式
            const prevSelectedLeft = document.querySelector('.card.selected[data-id]');
            if (prevSelectedLeft) {
                prevSelectedLeft.classList.remove('selected');
            }

            // 标记当前选中的左侧卡片
            selectedLeft = id;
            const currentCard = document.querySelector(`.card[data-id="${id}"]`);
            currentCard.classList.add('selected');
        }

        // 右侧卡片点击事件
        function handleRightCardClick(id) {
            if (!selectedLeft || isProcessing) return;
            isProcessing = true;

            // 获取右侧卡片元素
            const rightCard = document.querySelector(`#rightCards .card[data-id="${id}"]`);
            rightCard.classList.add('selected');

            // 检查配对是否正确
            if (selectedLeft === id) {
                // 配对成功
                currentScore++;
                scoreEl.textContent = currentScore;

                // 标记配对成功，卡片消失
                const leftMatchedCard = document.querySelector(`#leftCards .card[data-id="${selectedLeft}"]`);
                setTimeout(() => {
                    leftMatchedCard.classList.add('matched');
                    rightCard.classList.add('matched');

                    // 重置选中状态
                    selectedLeft = null;
                    isProcessing = false;

                    // 检查是否通关（此处保留失败机制，通关仍可继续直至错误）
                }, 300);
            } else {
                // 配对失败，游戏结束
                setTimeout(() => {
                    finalScoreEl.textContent = currentScore;
                    gameOverModal.classList.remove('hidden');
                    isProcessing = false;
                }, 500);
            }
        }

        // 事件监听
        // 重新开始游戏
        restartBtn.addEventListener('click', initGame);
        // 再来一局
        replayBtn.addEventListener('click', () => {
            gameOverModal.classList.add('hidden');
            initGame();
        });
        // 查看答案
        closeModalBtn.addEventListener('click', () => {
            answerList.classList.toggle('hidden');
            closeModalBtn.textContent = answerList.classList.contains('hidden') ? '查看答案' : '收起答案';
        });

        // 页面加载时初始化游戏
        window.onload = initGame;
    </script>
</body>
</html>